<template>
<div class="u-panel">
  <div class="u-user">
    <el-descriptions :column="2" border>
      <template slot="extra">
        <el-button type="primary" plain size="small" @click="update()">
          <svg-icon icon-class="edit_box_line"></svg-icon> 编辑
        </el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <svg-icon icon-class="user3"></svg-icon>
          用户名
        </template>
        {{ m.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <svg-icon icon-class="user1"></svg-icon>
          用户头像
        </template>
        <img :src="m.avatar" @click="sa.showImage(m.avatar, '400px', '400px')">
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <svg-icon icon-class="idcard"></svg-icon>
          用户昵称
        </template>
        {{ m.nickName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <svg-icon icon-class="phone2"></svg-icon>
          联系方式
        </template>
        {{ m.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <svg-icon icon-class="cake1"></svg-icon>
          出生日期
        </template>
        {{ sa.forDate(m.birth, 'yyyy-MM-dd HH:mm') || '无' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <svg-icon icon-class="mail2"></svg-icon>
          邮箱
        </template>
        {{ m.email }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <svg-icon icon-class="heart1"></svg-icon>
          血型(xo)
        </template>
        {{ dims.BLOOD_TYPE[m.blood] }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <svg-icon icon-class="arm1"></svg-icon>
          身高·cm
        </template>
        {{ m.height }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <svg-icon icon-class="weight"></svg-icon>
          体重·KG
        </template>
        {{ m.weight }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <svg-icon icon-class="men1"></svg-icon>
          性别
        </template>
        {{ dims.GENDER[m.sex] }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <svg-icon icon-class="time2"></svg-icon>
          入驻时间
        </template>
        {{ sa.forDate(m.firstUse, 2) || '无' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <svg-icon icon-class="information"></svg-icon>
          个人简介
        </template>
        {{ m.note }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</div>
</template>

<script>
import sa from '@/sa-frame/sa';
import router from '@/router';
import settings from '@/settings';
export default {
  name: 'u-user',
  data() {
    return {
      m: {},
      dims: sa.$sys.getCurd()
    }
  },
  created: function () {
    this.getUser()
  },
  methods: {
    // 获取当前用户
    getUser() {
      if (sa.$sys.getToken()) {
        sa.ajax('/cur/getUserById', function (res) {
          if (res.code === 200) {
            this.m = res.data;
          } else {
            router.push(settings.login_url)
          }
        }.bind(this), {
          type: "get"
        });
      } else {
        sa.$sys.removeCurUser()
        router.replace(settings.scs_home)
      }
    },

    // 操作
    update() {
      sa.showModel('入驻信息', () => import('./detail/update'), this.m);
    },
  },

}
</script>

<style scoped>
.u-panel {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: auto;
}

.u-user {
 
  height: 100%;
  width: 100%;
}
img{
  width: 30px;
  height: 30px;
}

.el-descriptions {
  width: 100%;

}

::v-deep .el-descriptions__header {
  padding: 5px 0px;
  margin: 0px;
}

.svg-icon {
  margin-right: 5px;
}
</style>
